<!--
 * @Author: your name
 * @Date: 2019-12-23 14:22:21
 * @LastEditTime: 2020-06-10 15:09:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\Odometer.vue
 -->
<template>
  <div class="container">
    <van-nav-bar title="数字滚动组件" :border="false" left-arrow fixed @click-left="$router.go('-1')" />
    <!-- <IOdometer class="iOdometer" :value="num" /> -->
    <div ref="number"></div>
  </div>
</template>

<script>
import IOdometer from "vue-odometer";
import Odometer from "odometer";
import "odometer/themes/odometer-theme-train-station.css";
export default {
    components: {
        IOdometer
    },
    data() {
        return {
            num: 131157684,
            odometer: {}
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.odometer = new Odometer({
                el: this.$refs.number,
                value: 0,
                theme: "train-station"
            });
            this.odometer.render();
            setInterval(() => {
                this.num += 1;
                this.odometer.update(this.num);
            }, 2000);
        }
    }
};
</script>

<style lang="less" scoped>
/deep/.odometer-digit {
    background: #fff !important;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
    /deep/.odometer-value {
        color: #333;
    }
}
</style>